<template>
	<view class="page-group">
		<image class="bg-img-view" :src="baseImageUrl + '/login/img_login_bg.png'"></image>
		<view class="top-group-view" :style="'margin-top:'+iStatusBarHeight+'px;'">
			<view @click="backClick()" class="top-title-view" :style="'height: '+navigationBarHeight+'px;'">
				<image class="back-img-view" src="../../static/login/icon_back.png"></image>
			</view>
			<view class="center-group-view">
				<view class="title-group-view">
					<text @click="phoneTitleClick()" :class="currentTab===0?'title-tab-native':'title-tab-normal'">{{isRegister?'手机注册':'手机登录'}}</text>
					<text @click="numberTitleClick()" :class="currentTab===1?'title-tab-native':'title-tab-normal'">编号登录</text>
				</view>
				<view class="input-group-view" v-if="currentTab===0">
					<view style="height: 26rpx;"></view>
					<view class="input-item_view">
						<image :src="baseImageUrl + '/login/icon_account.png'"></image>
						<input class="input-box-view" v-model="inputAccount" type="number" maxlength="11" placeholder="请输入手机号" confirm-type="next" placeholder-class="placeholder-view"  />
					</view>
				<!-- 	<view class="input-item_view" v-if="isRegister">
						<image :src="baseImageUrl + '/login/icon_reference.png'"></image>
						<input class="input-box-view" v-model="inputReference" type="number" maxlength="11" placeholder="输入推荐人手机号" confirm-type="next" placeholder-class="placeholder-view"  />
					</view> -->
					<view class="input-item_view">
						<image :src="baseImageUrl + '/login/icon_smscode.png'"></image>
						<input class="input-box-view" v-model="inputSms" type="text" maxlength="6" placeholder="请输入验证码" confirm-type="next" placeholder-class="placeholder-view"  />
						<view @click="sendCodeClick()" :disabled="disabled" class="send-code-txt">{{countdown}} <text v-show="timestatus">秒</text></view>
					</view>
					<view @click="phoneLoginClick()" class="login-btn-view">登录</view>
					<view class="remind-txt-view">
						<text @click="changeLoginClick()" v-if="isRegister">已有账号？点我登录</text>
						<text @click="changeRegisterClick()" v-else>没有账号？点我注册</text>
					</view>
				</view>
				<view class="input-group-view" v-else>
					<view style="height: 26rpx;"></view>
					<view class="input-item_view">
						<image :src="baseImageUrl + '/login/icon_number.png'"></image>
						<input class="input-box-view" v-model="inputNumber" type="number" maxlength="11" placeholder="请输入编号" confirm-type="next" placeholder-class="placeholder-view"  />
					</view>
					<view class="input-item_view">
						<image :src="baseImageUrl + '/login/icon_password.png'"></image>
						<input class="input-box-view" v-model="inputPwd" type="text" maxlength="6"  placeholder="请输入密码" confirm-type="next" placeholder-class="placeholder-view"  />
					</view>
					<view @click="numberLoginClick()" class="login-btn-view">登录</view>
				</view>
			</view>
		</view>
		<view class="bottom-group-view">
			<!-- <button class='wx-login-view' open-type="getUserProfile" @click="getuserinfo">
				<image class="wx-login-image" :src="baseImageUrl + '/login/ic_wx_logo.png'"></image>
			</button> -->
			<view style="display: flex;margin-top: 32rpx;">
				<view @click="checkAgreenClick()" style="display: flex;align-items: center;">
					<image class="agreement-image" :src="isCheck?'/static/login/ic_select_check.png':'/static/login/ic_select_normal.png'"/>
				</view>
				<view class="agreement-view">我已阅读并同意
					<text @click="registerPolicyClick()" class="agreement-text">《抖鑫用户使用协议》</text>
					<text @click="privacyPolicyClick()" class="agreement-text">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrls from '@/common/config.js';
	export default {
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				currentTab: 0,
				countdown:'获取验证码',
				disabled:false,
				timestatus:false,
				clear:'',
				inputAccount: "",
				inputReference: '',
				inputSms: '',
				inputNumber: '',
				inputPwd: '',
				isCheck: false,
				isRegister: false,
				loginParams: {},
			}
		},
		onReady() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;	
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
		},
		onLoad(options) {
			if (options.loginParams) {
				this.loginParams = JSON.parse(options.loginParams);
				this.isRegister = this.loginParams.isRegister;
				this.isCheck = true;
			}
		},
		methods: {
			numberLoginClick() {
				if (this.checkParamsForCode()) {
					var params;
					if (this.loginParams.unionId) {
						params = {
							phone: this.inputNumber,
							captcha: this.inputPwd,
							unionId: this.loginParams.unionId,
							platform: 1
						}
						this.codeLoginClick(params);
					} else {
						let that = this;
						uni.login({
						  	scopes:'auth_user',
						  	success: (loginInfo) => {
						  	    params = {
						  	    	phone: that.inputNumber,
						  	    	captcha: that.inputPwd,
						  	    	code: loginInfo.code,
						  	    	platform: 1
						  	    }
								that.codeLoginClick(params);
							}
						})
					}
				}
			},
			codeLoginClick(params) {
				this.$Request.postJsonLoadView(configUrls.codeLogin, params).then(res => {
					if (res.code == "10000") {
						let loinMsgDict = res.data.token;
						if (loinMsgDict) {
							uni.setStorageSync("accessToken", loinMsgDict.token);
							uni.setStorageSync("userId", loinMsgDict.userId);
							uni.setStorageSync("expireTime", loinMsgDict.expireTime);
							uni.setStorageSync("isLogin", true);
							uni.switchTab({
								url: '/pages/main/main'
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					} 
				}); 
			},
			phoneLoginClick() {
				if (this.checkParamsForPhone()) {
					let that = this;
					var params;
					if (this.loginParams.unionId) {
						if (this.isRegister) {
							params = {
								phone: that.inputAccount,
								captcha: that.inputSms,
								topCode: that.inputReference,
								isRegister: this.isRegister,
								unionId: this.loginParams.unionId,
								platform: 1
							}
						} else {
							params = {
								phone: that.inputAccount,
								captcha: that.inputSms,
								unionId: this.loginParams.unionId,
								platform: 1
							}
						}
						this.phoneLogin(params);
					} else {
						let that = this;
						uni.login({
						  	scopes:'auth_user',
						  	success: (loginInfo) => {
						  	    if (this.isRegister) {
									params = {
										phone: that.inputAccount,
										captcha: that.inputSms,
										topCode: that.inputReference,
										isRegister: this.isRegister,
										code: loginInfo.code,
										platform: 1
									}
								} else {
									params = {
										phone: that.inputAccount,
										captcha: that.inputSms,
										code: loginInfo.code,
										platform: 1
									}
								}
								that.phoneLogin(params);
							}
						})
					}
				}
			},
			phoneLogin(params) {
				console.log(JSON.stringify(params))
				this.$Request.postJsonLoadView(configUrls.phoneLogin, params).then(res => {
					if (res.code == "10000") {
						let loinMsgDict = res.data.token;
						if (loinMsgDict) {
							uni.setStorageSync("accessToken", loinMsgDict.token);
							uni.setStorageSync("userId", loinMsgDict.userId);
							uni.setStorageSync("expireTime", loinMsgDict.expireTime);
							uni.setStorageSync("isLogin", true);
							uni.switchTab({
								url: '/pages/main/main'
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					} 
				}); 
			},
			sendCodeClick() {
				if (this.inputAccount.length < 11){
					uni.showToast({
						title: '请输入11位手机号码',
						icon: 'none',
						duration: 2000
					});
					return
				}
				var that = this;
				if(!this.disabled) {
				    that.disabled = true;//禁用点击
					uni.showLoading({
						title: '加载中...'
					});
					this.$Request.postJson(configUrls.getCode + "?mobile=" + that.inputAccount, {
					}).then(res => {
						console.log("发送验证码=======>"+JSON.stringify(res));
						uni.hideLoading();
						if (res.code == "10000") {
							that.countdown = 60;
							that.timestatus = true;
							that.clear = setInterval(that.countDown,1000);
						} else {
							that.disabled = false;
						} 
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}); 
				}   
			},
			// 倒计时
			countDown(){
			    var that = this;
			    if(!that.countdown){                    
			        that.disabled = false;
			        that.timestatus = false;
			        that.countdown = '获取验证码';
			        clearInterval(that.clear);
			    }else{
			        --that.countdown;
			    }
			},
			checkParamsForPhone() {
				if (this.inputAccount.length < 11){
					uni.showToast({
						title: '请输入11位手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				console.log(this.inputReference.length)
				// if (this.isRegister && this.inputReference.length < 11) {
				// 	uni.showToast({
				// 		title: '请输入推荐人11位手机号码',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// 	return false;
				// }
				if (!this.inputSms){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.isCheck) {
					uni.showToast({
						title: "请先勾选同意用户协议",
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				return true;
			},
			checkParamsForCode() {
				if (this.inputNumber.length < 11){
					uni.showToast({
						title: '请输入11位编号',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.inputPwd){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if (!this.isCheck) {
					uni.showToast({
						title: "请先勾选同意用户协议",
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				return true;
			},
			changeLoginClick() {
				this.isRegister = false;
			},
			changeRegisterClick() {
				this.isRegister = true;
			},
			phoneTitleClick() {
				this.currentTab = 0;
			},
			numberTitleClick() {
				if (!this.isRegister) {
					this.currentTab = 1;
				}
			},
			backClick() {
				uni.navigateBack({
					delta:1,
				})
			},
			checkAgreenClick(){
				if (this.isCheck) {
					this.isCheck = false;
				} else {
					this.isCheck = true;
				}
			},
			registerPolicyClick() {
				uni.navigateTo({
					url: '/pages/index/h5Webview?titleStr=用户协议&url='+ encodeURIComponent(JSON.stringify(configUrls.registerPolicy))
				});
			},
			privacyPolicyClick() {
				uni.navigateTo({
					url: '/pages/index/h5Webview?titleStr=隐私政策&url='+ encodeURIComponent(JSON.stringify(configUrls.privacyPolicy))
				});
			}
		}
	}
</script>

<style>
	@import url("../../css/login/login.css");
</style>
